<script setup name="home-page">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { computed, onMounted } from 'vue';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();
const loading = ref(false);
const index = ref(-1);
const falg = ref(true);
const ul = ref(null);
onMounted(() => {
  console.log(ul.value);
});
// 请求
(async function() {
  loading.value = true;
  // 轮播图
  await store.dispatch('classify/updateSlideshow', {
    distributionSite: 1,
  });
  // 人气推荐
  store.dispatch('classify/updateRecommended');
  // 获取新鲜好物
  store.dispatch('classify/updateGood');
  // 获取热门品牌
  store.dispatch('classify/updateBrand', {
    limit: '5',
  });
  // 获取首页商品详情
  store.dispatch('classify/updateGoodsDetails');
  // 获取作新专题
  store.dispatch('classify/updateSubject');
  loading.value = false;
})();

// 鼠标进入侧边拦
function onSidebar(i) {
  index.value = i;
}
// 鼠标离开侧边拦
function onSidebarleave(i) {
  // console.log(i);
  index.value = -1;
}

// 点击左边按钮
function onLeft() {
  falg.value = true;
}
// 点击右边按钮
function onRight() {
  falg.value = false;
  store.dispatch('classify/updateBrand', {
    limit: '10',
  });
}

// 跳转三级页面
function goSubCategory(id) {
  router.push({
    path: `/category/sub/${id}`,
  });
}
// 跳转二级页面
function goOtherPages(id) {
  // pageIndex.value = i;
  // store.dispatch('second/updateSecondList', { id });
  router.push({
    path: `/category/${id}`,
  });
}
// 跳转详情页
function goDetail(id) {
  router.push({
    path: `/product/${id}`,
  });
}
// 主页分类信息
const classifyInfo = computed(() => store.state.classify.classifyInfo);
// 轮播图
const slideshow = computed(() => store.state.classify.slideshow);
// 人气推荐
const recommended = computed(() => store.state.classify.recommended);
// 获取新鲜好物
const good = computed(() => store.state.classify.good);
// 获取热门品牌
const brand = computed(() => store.state.classify.brand);
// 获取首页商品详情
const goodsDetails = computed(() => store.state.classify.goodsDetails);
// 获取作新专题
const subject = computed(() => store.state.classify.subject);
</script>

<template>
  <div class="sidebar-box">
    <div class="sidebar-warp">
      <!-- 轮播图 -->
      <div class="slideshow" m="t-5">
        <el-carousel
          trigger="click"
          height="500px"
          ref="ul"
        >
          <el-carousel-item
            v-for="item in slideshow"
            :key="item.id"
          >
            <img :src="item.imgUrl">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 侧边拦导航 -->
      <ul class="sidebar" >
        <li
          v-for="(item, i) in classifyInfo"
          :key="item.id"

          class="sidebar-item"
          :class="{
            active: index === i,
          }"
          @mouseenter="onSidebar(i)"
          @mouseleave="onSidebarleave(i)"
        >
          <span class="menu" @click="goOtherPages(item.id)">{{ item.name }}</span>
          <span class="menu-item" @click="goSubCategory((item.children)[0].id)">{{ (item.children)[0].name }}</span>
          <span class="menu-item" @click="goSubCategory((item.children)[1].id)">{{ (item.children)[1]?.name }}</span>
          <!-- 侧边拦导航分类推荐 -->
          <div
            class="recommend-warp"
            v-show="index === i"
          >
            <div class="recommend-title">
              <span>分类推荐</span>
              <span>根据您的购买记录或浏览记录推荐</span>
            </div>
            <div class="recommend-content">
              <div
                v-for="str in classifyInfo[index]?.goods"
                :key="str.id"
                class="recommend-content-item"
                @click="goDetail(str.id)"
              >
                <div class="content-img-warp">
                  <img :src="str.picture" alt="">
                </div>
                <div class="content-details">
                  <div>{{ str.name }}</div>
                  <div>{{ str.desc }}</div>
                  <div>¥{{ str.price }}</div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li
          class="sidebar-item-recommend"
        >
          <span class="menu">品牌</span>
          <span class="menu-item">品牌推荐</span>
        </li>
      </ul>
    </div>
  </div>
  <!-- 新鲜好物 -->
  <div class="good-warp">
    <div class="good-title">
      <div>
        <span>新鲜好物</span>
        <span>新鲜出炉 品质靠谱</span>
      </div>
      <span>
        查看全部
        <el-icon class="icon"><ArrowRight /></el-icon>
      </span>
    </div>
    <div class="good-content">
      <div
        class="good-content-item"
        v-for="item in good"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <div class="good-img">
          <img :src="item.picture">
        </div>
        <div class="good-details">
          <div>{{ item.name }}</div>
          <div>¥{{ item.price }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 人气推荐 -->
  <div class="good-warp">
    <div class="good-title">
      <div>
        <span>人气推荐</span>
        <span>人气爆款 不容错过</span>
      </div>
    </div>
    <div class="good-content">
      <div
        class="good-content-item"
        v-for="item in recommended"
        :key="item.id"
      >
        <div class="good-img">
          <img :src="item.picture">
        </div>
        <div class="recommended-details">
          <div>{{ item.title }}</div>
          <div class="color">{{ item.alt }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 热门品牌 -->
  <div class="brand-warp">
    <div class="brand">
      <div class="brand-title">
        <div>
          <span>热门品牌</span>
          <span>国际经典 品质保证</span>
        </div>
        <span>
          <div
            :class="{
              left: true,
              color: !falg,
            }"
            @click="onLeft"
            :disabled="falg"
          >
            <el-icon><ArrowLeft /></el-icon>
          </div>
          <div
            :class="{
              right: true,
              color: falg,
            }"
            @click="onRight"
            :disabled="!falg"
          >
            <el-icon><ArrowRight /></el-icon>
          </div>
        </span>
      </div>
      <div class="contant" >
        <div :class="{
          warp: true,
          transformr: !falg,
          transforml: falg,
        }">
          <div class="brand-img" v-for="item in brand" :key="item.id">
            <img :src="item.picture">
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 居家等 -->
  <div class="box-warp">
    <div
      class="box"
      v-for="item in goodsDetails"
      :key="item.id"
    >
      <div class="box-title">
        <div>
          <span>{{ item.name }}</span>
        </div>
        <div>
          <el-button
            v-for="button in item.children"
            :key="button.id"
            class="box-btn"
            text
          >
            {{ button.name }}
          </el-button>
          <span>
            查看全部
            <el-icon class="icon"><ArrowRight /></el-icon>
          </span>
        </div>
      </div>
      <div class="box-content">
        <div class="box-content-left">
          <img :src="item.picture">
          <div class="saleInfo">
            <span>{{ item.name }}馆</span>
            <span>{{ item.saleInfo }}</span>
          </div>
        </div>
        <div class="box-content-right">
          <div
            class="box-content-right-item"
            v-for="str in item.goods"
            :key="str.id"
            @click="goDetail(str.id)"
          >
            <div>
              <img :src="str.picture">
            </div>
            <div>
              <span>{{ str.name }}</span>
              <span>{{ str.desc }}</span>
              <span>¥{{ str.price }}</span>
            </div>
            <div>
              <span>找相似</span>
              <span>
                发现更多宝贝
                <el-icon class="icon"><ArrowRight /></el-icon>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 最新专题 -->
  <div class="subject-warp">
    <div class="subject">
      <div class="subject-title">
        <div>
          <span>最新专题</span>
        </div>
        <span>
          查看全部
          <el-icon class="icon"><ArrowRight /></el-icon>
        </span>
      </div>
      <div class="subject-content">
        <div
          class="subject-content-item"
          v-for="item in subject"
          :key="item.id"
        >
          <div>
            <img :src="item.cover">
            <div class="subject-desc">
              <div class="desc">
                <span class="subject-title">{{ item.title }}</span>
                <span class="summary">{{ item.summary }}</span>
              </div>
              <div class="lowestPrice">¥{{ item.lowestPrice }}</div>
            </div>
          </div>
          <div class="information">
            <span>
              <span>
                <icon name="aixin" size="20"/>
                {{ item.collectNum }}
              </span>
              <span>
                <icon name="eyes" size="20"/>
                {{ item.viewNum }}
              </span>
            </span>
            <span>
              <icon name="pinglun" size="20"/>
              {{ item.replyNum }}
            </span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style scope lang="scss">
$color : #5bb79c;
.warp {
  width: 1240px;
  margin: 0 auto;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0;

  div:nth-child(1) {
    span:nth-child(1) {
      font-size: 30px;
      margin: 0 16px 16px 4px;
    }

    span:nth-child(2) {
      font-size: 14px;
      color: #a5a5a5;
    }
  }

  >span {
    color: #a5a5a5;

    &:hover {
      color: $color;
      cursor: pointer;
    }

  }
}

.icon {
  vertical-align: middle;
}
.hide {
  width: 100%;
  /* 有限的空间才能有溢出的可能 */
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
  line-break: anywhere;
}

// 侧边拦

.sidebar-box {
  width: 100%;
  background-color: #f5f5f5;
  height: 500px;

  .sidebar-warp {
    position: relative;
    @extend .warp;

    //轮播图
    .slideshow {

      .el-carousel__item img {
        width: 100%;
        height: 100%;
      }
      .el-carousel__arrow--left {
        left: 270px;
      }
      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
      }
    }
  // 侧边拦
    .sidebar {
      margin: 0;
      padding: 0;
      position: absolute;
      width: 250px;
      height: 500px;
      background-color: rgba(36, 41, 39, .8);
      top: 0;
      left: 0px;

      .sidebar-item {
        display: flex;
        align-items: center;
        width: 250px;
        height: 50px;
        color: #fff;
        padding-left: 30px;

        &:hover {
          cursor: pointer;

        }

        &.active {
          background-color: $color;
        }

        .menu-item {
          margin-left: 8px;
          font-size: 14px;
        }

        // 推荐
        .recommend-warp {
          display: flex;
          flex-direction: column;
          position: absolute;
          top: 0;
          left: 250px;
          width: 990px;
          height: 500px;
          background-color: #f3f5f4;
          // opacity: .9;
          padding: 0 16px;
          vertical-align: middle;

          .recommend-title {
            margin: 30px 0;

            span:nth-child(1) {
              font-size: 20px;
              margin-right: 8px;
              color: #000;
            }

            span:nth-child(2) {
              font-size: 16px;
              color: #666666;
            }
          }

          .recommend-content {
            padding: 0;
            display: grid;
            flex: 1;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 16px;

            .recommend-content-item {
              padding: 16px;
              display: flex;
              height: 120px;
              background-color: #fff;

              &:hover {
                background-color: #e7f8f4;
              }

              .content-img-warp {
                width: 95px;
                height: 95px;

                img {
                  // margin: 6px 0;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }

              .content-details {
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: space-around;
                margin-left: 10px;

                div:nth-child(1) {
                  color: #666667;
                }

                div:nth-child(2) {
                  color: #9b9b9b;
                  width: 100%;
                  font-size: 14px;
                  /* 有限的空间才能有溢出的可能 */
                  overflow: hidden;
                  -webkit-line-clamp: 1;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  word-break: break-all;
                  line-break: anywhere;
                }

                div:nth-child(3) {
                  color: #bf4e49;
                }
              }
            }
          }
        }

      }

      .sidebar-item-recommend {
        display: flex;
        align-items: center;
        width: 250px;
        height: 50px;
        color: #fff;
        padding-left: 30px;

        &:hover {
          background-color: $color ;
          cursor: pointer;

        }

        .menu-item {
          margin-left: 8px;
          font-size: 14px;
        }

      }
    }


}
}


// 新鲜好物/人气推荐
.good-warp {
  @extend .warp;
  .good-title {
    @extend .title;
  }

  .good-content {
    height: 406px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-around;

    .good-content-item {
      // flex: 1;
      width: 306px;
      display: flex;
      flex-direction: column;
      height: 100%;
      // background-color: pink;
      transition: all .5s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 10px #ccc;
        cursor: pointer;
      }

      .good-img {
        width: 306px;
        height: 306px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .good-details {
        width: 100%;
        padding: 0 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #f2f9f4;
        align-items: center;
        justify-content: space-around;
        font-size: 24px;

        div:nth-child(1) {
          width: 100%;
          /* 有限的空间才能有溢出的可能 */
          overflow: hidden;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          word-break: break-all;
          line-break: anywhere;
        }

         div:nth-child(2) {
          color: #bf4e49;
         }


      }

      .recommended-details {
        width: 100%;
        padding: 0 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        align-items: center;
        justify-content: space-around;
        font-size: 24px;

        div:nth-child(2) {
          color: #999999;
          font-size: 18px;
        }
      }
    }
  }
}

// 热门品牌
.brand-warp {
  background-color: #f5f5f5;
  width: 100%;

  .brand {
    padding: 20px 0;
    background-color: #f5f5f5;
    @extend .warp;

    .brand-title {
      @extend .title;

      .right,
      .left {
        display: inline-flex;
        width: 20px;
        height: 20px;
        color: #fff;
        justify-content: center;
        align-items: center;
        background-color: #ccc;
        margin-right: 4px;
        border: none;
        padding: 0;
        border-radius: 0;

        &:hover {
          color: #fff;
        }
      }
      .color {
        background-color: $color;
      }
    }

    .contant {
      display: flex;
      width: 100%;
      overflow: hidden;

      .transformr {
        transform: translateX(-1240px);
      }
      .transforml {
        transform: translateX(0px);
      }
      .warp {
        display: flex;
        width: 200%;
        margin-right: 10px;
        justify-content: space-around;
         transition: all 1s;


        .brand-img {
          margin-right: 10px;
          width: 240px;
          height: 305px;
          background-color: pink;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      }

    }
  }

}
// 居家等
.box-warp {
  @extend .warp;
  .box {

    .box-title {
      @extend .title;

      div:nth-child(2) {
        .box-btn {
          color: #333333;
          font-size: 16px;

          &:nth-child(4){
            margin-right: 100px;

          }

          &:hover {
            color: #fff;
            background-color: $color;
          }
        }

        >span:hover {
          color: $color;
          cursor: pointer;
        }
      }
    }

    .box-content {
      width: 100%;
      height: 610px;
      // background-color: pink;
      display: flex;

      .box-content-left {
        position: relative;
        width: 240px;
        height: 100%;
        background-color: skyblue;
         margin-right: 10px;

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }

        .saleInfo {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          color: #fff;

          span:nth-child(1) {
            font-size: 16px;
            padding: 20px 16px;
            background-color: #000;
          }

          span:nth-child(2) {
            font-size: 16px;
            padding: 20px 8px;
            background-color: rgba($color: #211c0f, $alpha: .7);
          }

        }

        &:hover {
          cursor: pointer;
        }
      }

      .box-content-right {
        flex: 1;
        // background-color: yellow;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;


        .box-content-right-item {
          position: relative;
          width: 240px;
          height: 300px;
          // background-color: pink;
          display: flex;
          align-items: center;
          flex-direction: column;
          padding: 16px 25px;


          div:nth-child(1) {
            width: 160px;
            height: 160px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          div:nth-child(2) {
            padding-left: 5px;
            flex: 1;
            display: flex;
            flex-direction: column;
            // justify-content: flex-start;
            justify-content: space-around;

            span:nth-child(1) {
              width: 100%;
              /* 有限的空间才能有溢出的可能 */
              overflow: hidden;
              -webkit-line-clamp: 2;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              word-break: break-all;
              line-break: anywhere;
            }

            span:nth-child(2) {
              width: 100%;
              color: #666666;
              /* 有限的空间才能有溢出的可能 */
              overflow: hidden;
              -webkit-line-clamp: 1;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              word-break: break-all;
              line-break: anywhere;
            }

            span:nth-child(3) {
              color: #bf4e49;
              font-size: 20px;
            }
          }

          div:nth-child(3) {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            // height: 86px;
            height: 0;
            background-color: $color;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
            overflow: hidden;
            opacity: 0;
            transition: all .5s;

            span:nth-child(1) {
              padding: 0 30px 8px 30px;
              border-bottom: 1px solid #fff;
            }

            span:nth-child(2) {
              margin-top: 8px;
              font-size: 14px;
            }
          }

          &:hover {
            outline: 1px solid $color;
            cursor: pointer;

            div:nth-child(3) {
              height: 86px;
              opacity: 1;
            }
          }
        }
      }
    }
  }
}

// 最新专题
.subject-warp {
  width: 100%;
  background-color: #f6f5f6;

  .subject {
    @extend .warp;
    padding: 20px 0;
    background-color: #f6f5f6;

    .subject-title {
      @extend .title;
    }

    .subject-content {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;

      .subject-content-item {
        width: 404px;
        height: 100%;
        transform: translateY(0);
        transition: all .5s;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 0 10px #ccc;
          cursor: pointer;
          //  transition: all .5 ;
        }

        div:nth-child(1) {
          position: relative;
          width: 100%;
          height: 288px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .subject-desc {
            position: absolute;
            width: 100%;
            height: 50%;
            background-image: linear-gradient(180deg, transparent, #383837);
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 24px 16px;

            .lowestPrice {
              color: #bf4e49;
              background-color: #fff;
              padding: 4px;
              border-radius: 4px;
            }

            .desc {
              display: flex;
              height: 100%;
              width: 60%;
              flex-direction: column;
              justify-content: end;

              .subject-title {
                @extend .hide;
                font-size: 24px;
                color: #fff;
                margin: 0;

              }
              .summary {
                @extend .hide;
                color: #999999;
              }
            }


          }
        }

        .information {
          width: 100%;
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 16px;

          span:nth-child(1) {

            span {
              margin-right: 16px;
            }
          }
        }


      }
    }

  }

}
</style>
